<h2>Find Items using JSON and JQuery</h2>
<a href="#" id="getItems">getItems</a>

<input type="test" id="tbItemId" value="" />
<a href="#" id="findItem">find Item</a>

<dl id="items">
    
</dl>

<script type="text/javascript">
    $(function(){
        $("#getItems").click(function(){
            getAllItemsJson();
            return false;
        });
        $("#findItem").click(function(){
            $itemId = $("#tbItemId").val();
            if($itemId.length == 0)
                getAllItemsJson();
            else
                getItemJson($itemId);
            return false;
        });
    
        function getAllItemsJson(){
            $.post(
                "<?php echo $this->baseUrl(); ?>" + "/async/getitems",
                {},
                function(data){
                    for(var i=0; i < data.length; i++ ){
                        $("#items").append("<dt>"+data[i].id+": "+data[i].name+"</dt>");
                        $("#items").append("<dd>"+data[i].description+"</dd>");

                    }
                },'json'
            );
        }  
        
        function getItemJson(itemId){
            $.post(
                "<?php echo $this->baseUrl(); ?>" + "/async/getitem-byid",
                {
                    "itemId" : itemId
                },
                function(data){
                    $("#items").append("<dt>"+data.id+": "+data.name+"</dt>");
                    $("#items").append("<dd>"+data.description+"</dd>");

                },'json'
            );
        }
    });
</script>